<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>XXX</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
  <link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}

.layui-select, .layui-textarea{
  height: 20px;
}

/* 防止下拉框的下拉列表被隐藏---必须设置--- */        
.layui-table-cell {    overflow: visible ;      } 
.layui-table-box {
           overflow: visible; /* 表格的滚动条 */
        }
        
.layui-table-body {
          overflow: visible; 
        }
/* 使得下拉框与单元格刚好合适 */       
td .layui-form-select{
	margin-top: -10px;
	margin-left: -15px;
	margin-right: -15px;
}  
/* .layui-table tr th,td{padding:0px;text-align:center;width:33.4%;}  */
</style>

<body>
<form id="myform">
<input type="hidden" id="groupID" name="groupID" value="${prowerGroup.groupID}">
 <div class="demoTable" style="margin-top: 15px;margin-left: 20px;display:none;">
 
</div> 
</form>   	
<div  class="" id="father" style="width:100%;margin-top:0px;position:relative;">
<!-- position:relative -->
<div id="headdiv" style="padding-top:0px;margin-top:-20px;position:fixed; width:100%;z-index:9999">
  <table class="layui-table" id="testhead" lay-filter="testhead">

</table>
</div>
<div id="shuju" style="position:absolute;bottom:2px;top:62px;width:100%">
	<table class="layui-table" id="test1" lay-filter="test1" style="">	
	
	</table>
</div>	
</div>	

<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
<!-- 头部 -->
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
    <span class="layui-btn layui-btn-sm" lay-event="quanxuan">全选</span>
    <span class="layui-btn layui-btn-sm" lay-event="quanqing">全清</span>
    <span class="layui-btn layui-btn-sm" lay-event="save">确定</span>
  </div>
</script>
<script type="text/javascript" >

var fn1 = function (field) {
 	var tmp = $('#tmp').html();
	return function (data) {
	// return data[field];
	return [tmp].join('');
	}; 
};
/* console.log(fn1); */
</script>

<script type="text/html" id="selectlay">
<form class="layui-form" action="" >
    <div class="layui-form-item layui-col-md3" >
           <select type="text"  name="timeName" id="timeName"  lay-filter="timeName" lay-verify="required">
		{{# layui.each(d.timeName, function(index, item){ }}
            <option value="{{index}}">{{item}}</option>
        {{# }); }}
			</select>
    </div>
</form>
</script>

<script>
var ckData = new Array();
var ckData1 = new Array();//存放userid的值(全选)
var ckData2 = new Array();//存放userid的值(单选)

var dataflag = 3; //全选全清标志
//可提交数据数组
var dataPackage = new Array();
//未选数据量，用于全选和全清
var dataCount = new Array();



Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};

Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

var test1Table = new Array();

//表格事件
layui.use([ 'table','layer', 'jquery', 'form'], function(){ 
	var parm = $('#myform').serialize(); //获取表单所有数据
	$ = layui.jquery;
	var table = layui.table;
	var form = layui.form ,layer = layui.layer;
  var layTableId="test1";
  var flag=0; //判断表格是否在增加数据
  
  
//返回data数据给表格
 	var laydata="";
  function getdata(parm){
 	 //alert(111);
 	 $.ajax({
 			type:"POST",
 			data:parm,
 			async:false,  //默认true,异步
 			//url:'${bathPath}/aDKController/selectAllu.action?groupID='+$("#groupID").val(),
 			url:'${bathPath}/aDKController/selectAllu.action',
 			success:function(data){
 					laydata=data;
 		    }
 		});  
 	 return laydata;
  }
  
//console.log(laydata);






	  
   //监听行工具栏事件
  	table.on('tool(test1)', function(obj){//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  		var data = obj.data; //获得当前行数据
  		//alert(data)
  		//var classesId = data.classesId;
  		 var kk=data['numbers'];  //获取属性uid的值@C
		  alert(kk);//@C //none
  	    layEvent = obj.event; //获得 lay-event 对应的值
  	    alert(layEvent);//none
  });
   
   

  //搜索事件
  function selectall()
  {
	  var parm1 = $('#myform').serialize(); //获取表单所有数据
  	//这里以搜索为例
  	table.reload('test',{
  		data:getdata(parm1),  //返回查询后的data直接赋值
  	    page: {
  	    curr: 1 //重新从第 1 页开始
  	  }
  	});
  	}
  
  
  
 <%--  <% List<Object> list=new ArrayList(Object); %> --%>
 
 
 
//监听选中行//仅仅监听选中，不要涉及数据操作，因为获取不到更新后的数据，将数据操作统一放到下拉框监听中
	table.on('checkbox(test1)', function(obj){
	 
		dataflag = 1;
	  var row =layui.$(obj.tr).data('index');//??
	  var cdata=obj.data;
	   if(obj.checked==true){
     	 ckData2.push(cdata);
     	 
	  }else{
		  ckData2.pop(cdata);
		  //ckData1.remove(obj.data);
	  } 
	  //console.log(ckData2); 
	  //console.log(obj.data.ID); 
	  //console.log(obj.type);


	  for(var i=0;i<ckData2.length;i++){
	     //console.log(ckData2[i].timeName);//具体数据done
	  }
	  
	  //如果触发的是全选，则为：all，如果触发的是单选，则为：one
	  //翻页测试代码
	});//复选框监听
  
	
	//下拉框监听，操作数据
	form.on('select(timeName)', function (data) {
		//console.log('Select');
		var elem = $(data.elem);
		var trElem = elem.parents('tr');
		//tableData为当前页所有数据
		var tableData = table.cache['test1'];
		
		// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
		tableData[trElem.data('index')][elem.attr('name')] = data.value;
		// 其他的操作看需求 TODO
     	// console.log('Select End');
  });//监听下拉框方法

  

//监听头工具栏事件(全选，全清，保存)
	table.on('toolbar(testhead)', function(obj){
		
		var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data; //获取选中的数据
		//alert("头部工具栏");
		var kk=data.value;  //获取属性uid的值@C
		//alert(kk);//@C //none 
		
	 
  	console.log("进入监听");
	switch(obj.event){
		case 'quanxuan':   //全选     
		dataflag = 2;
	    $(".layui-unselect.layui-form-checkbox").addClass("layui-form-checked");//只改变了选中样式，没有真正的改变选中状态，所以需要下一步操作，改变状态
	    //console.log("Begin");
	    
	    var tadata = ta.config.data; //编辑后的全部数据// ta为table.render表格渲染方法done
	    //console.log('所有数据');
		console.log(tadata);
		var k = 0;
		//全选判断逻辑
		for(var i = 0; i < tadata.length; i++){
			//console.log(tadata[i].hasOwnProperty('LAY_CHECKED'));
			if(tadata[i].hasOwnProperty('LAY_CHECKED')=== false || tadata[i].LAY_CHECKED === false){//选中判断1
						//console.log(tadata[i].LAY_TABLE_INDEX);//当前页行号
						//保存到提交数组中
						//console.log(dataPackage[i].timeName);
						dataCount[k] = i;
						k = k + 1;
			 }
		 }//数据校验-全选判断
	    
	  	trcli();//
	    
	    //console.log("End");	    
	    form.render('checkbox');//将有状态的选项刷新，
	    
	
	    
	    var all = table.cache.test1;//获取test1所有数据
	    //console.log(table);
	  /*   for(var i = 0 ; i < all.length ; i++){
	   	 if(ckData.indexOf(all[i])<0){    		 
	   		 ckData.push(all[i]);
	   	 }
	    } */
	   // console.log(ckData);
	  break;
	  case 'quanqing':   //全清
		dataflag = 3;
		$(".layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");
		form.render('checkbox');
		var all = table.cache.test1;
	 	 //清除所有数据
	 	 for(var i = 0 ; i < all.length ; i++){
	     	 ckData.remove(all[i]);
	      }
	 	 
	 		//全清判断逻辑
			var tadata = ta.config.data; //编辑后的全部数据// ta为table.render表格渲染方法done
			var k = 0;
			for(var i = 0; i < tadata.length; i++){
				//console.log(tadata[i].hasOwnProperty('LAY_CHECKED'));
				if(tadata[i].hasOwnProperty('LAY_CHECKED')=== true && tadata[i].LAY_CHECKED === true){//选中判断1
					//保存到提交数组中
					dataCount[k] = i;
					k = k + 1;
				 }
			}//数据校验-全选判断
			trcli();
	break;
		case 'save':   //保存
	    	console.log("保存");//@C 
	    	var tadata = ta.config.data; //编辑后的全部数据// ta为table.render表格渲染方法done
	  	  	//console.log(ckData1);//空值
	        //alert(ckData);//空值
	        //console.log(dataflag);//标志验证
	        //验证数据
	        /* for(var j = 0; j<dataPackage.length; j++){
	        	console.log(dataPackage[i].timeName);
	        } */
	        if(dataflag === 1){//正常选择流程
	    		//正常选择数据校验流程，封装为可提交数据@C
	    		//渲染时定义var ta=table.render变量，用于获取编辑后的全部数据
	    		/* var tadata = ta.config.data; //编辑后的全部数据// ta为table.render表格渲染方法done */
	    		/* 数据校验 */
	    		for(var i = 0; i < tadata.length; i++){
					if(tadata[i].hasOwnProperty('LAY_CHECKED')=== true && tadata[i].LAY_CHECKED === true){//选中判断1
	    				 //已选中,判断是否选择下拉框
	    					//if(Object.prototype.toString.call(tadata[i].timeName)=== Object.prototype.toString.call("")){
	    						//console.log(tadata[i].LAY_TABLE_INDEX);//当前页行号
	    						//保存到提交数组中
	    						dataPackage[i] = tadata[i];
	    						console.log(dataPackage[i]);//done
	    					//}
	    			 }
	    		 }//数据校验-选中判断
	    	
	        	
	        }else if (dataflag === 2){//全选流程,无用流程 @C
	    /*     	for(var i = 0; i < tadata.length; i++){
					if(Object.prototype.toString.call(tadata[i].timeName)=== Object.prototype.toString.call("")){
						//console.log(tadata[i].LAY_TABLE_INDEX);//当前页行号
						//保存到提交数组中
						dataPackage[i] = tadata[i];
						console.log(dataPackage[i].timeName);
					}
	        	} */
	        }else if (dataflag === 3){//全清保存流程-无用流程 @C
	        
	        }
	        //非空判断
	        /* console.log('ID');//id===1
	        console.log($("#groupID").val()); */
	        console.log(JSON.stringify(dataPackage));
	   	 if(dataPackage.length === 0){
				layer.confirm("您未选择任何选项！", {btn: ['确定'], title: "提示",skin:"my-skin"}, function(){//@C
					layer.close(layer.index);//@C
				});//@C
		 }else { 
        
			$.ajax({
				type:"POST",
				async:false,
				//contentType: "application/json",
				contentType:'application/json;charset=UTF-8',
				dataType: "json",
				data:JSON.stringify(dataPackage),
				//url:"${bathPath}/aDKUserGroup/addUserPGroup.action?groupID="+$("#groupID").val()+"&ckData1="+JSON.stringify(ckData1),
				url:"${bathPath}/aDKController/addDoorPowerGroup.action?GroupID="+$("#groupID").val(),		
			    success:function(data){
						//layer.confirm("保存成功！", {btn: ['确定'], title: "提示",skin:"my-skin"}, function(){//@C @C认为可以不要保存成功提示-待修改
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index); //再执行关闭
						//});//@C
			     }
			 });
		 }//判空
     
    break;
		case 'quxiao':   //取消
		var index1 = parent.layer.getFrameIndex(window.name);  
	  parent.layer.close(index1);//关闭当前页 
	   break;
	};
});



//监听排序
  table.on('sort(test1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
  parm="sort="+obj.field+"&order="+ obj.type;
  alert(parm);
  table.reload('test1', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,data:getdata(parm)
  });
}); 

// 表头表格 @C
   var ta2 = table.render({
	  elem: '#testhead'
		    ,id: 'testhead'
		   //,url:'${bathPath}/aDKUserInfo/selectAllu.action?groupID='+$("#groupID").val()
			,data:getdata(parm)//让表头使用列宽，获取一条数据开销较小@C
		    ,toolbar: '#toolbarDemo' 
		    ,cellMinWidth: 90 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,width:784
		    ,size:'sm'//小表格
		    ,cols: [[
		    	 {type:'numbers', field:'checkbox',title:'选择', fixed: 'left',width:'10%'}
				,{type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'}
		      	,{type: 'numbers',field: 'location',title:'控制器', fixed: 'left',align:'center',width:'20%'}
		      	,{type: 'numbers',field: 'dooraddr',title:'门地址', fixed: 'left',align:'center',width:'20%'}
		      	,{type: 'numbers',field: 'name',title:'门名称', fixed: 'left',align:'center',width:'20%'}
		      	,{type: 'numbers',field:'timeName',title: '通行时间组',search: true, edit: false, width:'20%', type: 'normal'}
		      	//,{ field:'timename',title: '通行时间组',search: true, edit: false, width:'20%', type: 'normal', templet: fn1('tmp')}
		    ]]
	    ,page: false //开启分页
	    ,limit:1   //默认十条数据一页
		,done:function(res,curr,count){
			 $('td').hide();//隐藏的样式 
		}//done方法
	}); //table.render方法 

	
  	//渲染表格(数据表格)@C
  	 $('td').hide();//隐藏的样式 
	 var ta = table.render({
		  elem: '#test1'
			    ,id: layTableId
			   //,url:'${bathPath}/aDKUserInfo/selectAllu.action?groupID='+$("#groupID").val()
			 	,data:getdata(parm)
			 	//,toolbar: '#toolbarDemo' 
			    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			    ,width:784
			    ,size:'sm'//小表格
			    ,cols: [[
			    	{type: 'checkbox', fixed: 'left',align:'center',width:'10%'}
					,{type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'}
			      	,{field: 'location',title:'控制器', fixed: 'left',align:'center',width:'20%'}
			      	,{field: 'dooraddr',title:'门地址', fixed: 'left',align:'center',width:'20%'}
			      	,{field: 'name',title:'门名称', fixed: 'left',align:'center',width:'20%'}
			      	,{ field:'timeName',title: '通行时间组',search: true, edit: false, width:'20%', type: 'normal', templet:'#selectlay'}
			      	//,{ field:'timename',title: '通行时间组',search: true, edit: false, width:'20%', type: 'normal', templet: fn1('tmp')}
			    ]]
		    //,page: false //开启分页
		    ,limit:getdata(parm).length   //默认十条数据一页
	        //,limits:[10,20,30,40,100]  //数据分页条
			,done:function(res,curr,count){
			//如果返回数据为空，提示为空
				if(getdata(parm).length === 0){
					layer.confirm("当前门权限无数据！", {btn: ['返回'], title: "提示",skin:"my-skin"}, function(){//@C
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index); //再执行关闭
				});//@C
				}
				
				$("#shuju th").hide();//数据表头隐藏done
		  
	        	var all =table.cache.test1;//当前页数据，翻页刷新
	        	console.log("done Method");
	        	var ck = $(".layui-unselect.layui-form-checkbox");
        	
				for(var j = 0 ; j < all.length ; j++){
					var index = JSON.stringify(ckData).indexOf(JSON.stringify(all[j]));
					var i = j+all.length;
			       	if(index > -1){       
			       		 console.log(i);
			   			 ck.eq(i).addClass("layui-form-checked");
			       	 }
			      }
        	
				//实现默认选中事件
				$('select[name="timeName"]').next().find('.layui-select-title input').click();
				$('select[name="timeName"]').next().find('.layui-anim').children('dd[lay-value="1"]').click();
				console.log("done Method end");         
			}//done方法
		}); //table.render方法
		

	});//layui.use方法     
	
	//通过点击去强制全选
	var trcli = function(){
		
		var index = $(".layui-table-body table.layui-table tbody tr").attr('data-index');//1、取得行的索引data-index，为后面查找checkbox的控件作准备
		var tableBox = $(".layui-table-body table.layui-table tbody tr").parents('.layui-table-box');
		//存在固定列//2、根据是否有固定列查找checkbox所在的表格table（当存在固定列时，固定列是另一个table，checkbox控件就在这上面，因此要优先取这个）
		if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
			tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
		} else {
			tableDiv = tableBox.find(".layui-table-body.layui-table-main");
		}
		//3、通过table和data-index查找checkbox控件”td div.laytable-cell-checkbox div.layui-form-checkbox I”，如果存在，则执行单击
		for(var ind = 0; ind < dataCount.length; ind++){
			var checkCell = tableDiv.find("tr[data-index=" + dataCount[ind] + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
			if (checkCell.length>0) {
	        checkCell.click();//执行点击
	        //每次清空数组，防止数据混乱@C
			dataCount[ind] = null;
			}
		}
	
	}

 	//单击行勾选checkbox事件//实现原理：找到table的div绑定单击事件到表格的行：
/* 	$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
		
	    var index = $(this).attr('data-index');//1、取得行的索引data-index，为后面查找checkbox的控件作准备
	    var tableBox = $(this).parents('.layui-table-box');
	    //存在固定列//2、根据是否有固定列查找checkbox所在的表格table（当存在固定列时，固定列是另一个table，checkbox控件就在这上面，因此要优先取这个）
	    if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
	        tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
	    } else {
	        tableDiv = tableBox.find(".layui-table-body.layui-table-main");
	    }
	    //3、通过table和data-index查找checkbox控件”td div.laytable-cell-checkbox div.layui-form-checkbox I”，如果存在，则执行单击
	    var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
	    if (checkCell.length>0) {
	        checkCell.click();
	    }
	}); */
	//4、对td的单击事件进行拦截停止，防止事件冒泡再次触发上述的单击事件5、将此代码在页面初始化后执行一次即可以。
	$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
	    e.stopPropagation();
	}); 

</script>

</body>
</html>